<template>
  <div id="app">
    <div class="block">
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>

    <div class="block">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="input">
      </el-input>
    </div>

    <div class="block">
      <div>
        <span class="demonstration">默认</span>
        <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>

      <div>
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
            v-model="value1"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="{
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }">
        </el-date-picker>
      </div>
    </div>

    <div class="block">
      <span class="demonstration">选择日期范围</span>
      <el-date-picker
          v-model="value2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>

    <div class="block">
      <span class="demonstration">日期和时间点</span>
      <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      input: '',
      value1: '',
      value2: '',
      value3: '',
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-bottom: 50px;
}
</style>
